<template>
  <div>
    <div>
    <el-row :gutter="20">
            <el-col :span="1.5"></el-col>
            <!-- <el-col :span="1"><el-button size="small" @click="getfrontdeskuser()">搜索</el-button></el-col> -->
            <el-col :span="6"><div class="grid-content bg-purple"></div></el-col>
            <el-col :span="6"><div class="grid-content bg-purple"></div></el-col>
        </el-row> 
        <div style="height:30px ;width: 100%;background:#f5f5f5; position: relative; top: 9px;">
        </div>
        <!-- 全查 -->
    <el-table :data="tableData" style="width: 100%" >
    <el-table-column type="expand">
      <template slot-scope="props">
        <el-form label-position="left" inline class="demo-table-expand">
          <el-form-item label="实际付款价格">
            <span>{{ props.row.paymentPrice }}</span>
          </el-form-item>
          <el-form-item label="付款人电话">
            <span>{{ props.row.paymentPhone }}</span>
          </el-form-item>
          <el-form-item label="支付方式">
            <span>{{ props.row.orderShipping }}</span>
          </el-form-item>
          <el-form-item label="创建时间">
            <span>{{ props.row.createTime }}</span>
          </el-form-item>
          <el-form-item label="修改时间">
            <span>{{ props.row.updateTime }}</span>
          </el-form-item>
        </el-form>
      </template>
    </el-table-column>
    <el-table-column
      label="订单编号"
      prop="orderNumber"
      height="500">
    </el-table-column>
    <el-table-column
      label="商品名称"
      prop="orderName">
    </el-table-column>
    <el-table-column
      label="课程价格"
      prop="orderPrice">
    </el-table-column>
    <el-table-column
      label="付款人名称"
      prop="paymentName">
    </el-table-column>
    <el-table-column
      label="是否付款"
      prop="orderStatus">
    <template slot-scope="scope">
        <el-tag type="success" v-if="scope.row.orderStatus==0">
            已付款
        </el-tag>
        <el-tag type="danger" v-else>
            未付款
        </el-tag>
    </template>
    </el-table-column>
    <!-- <el-table-column label="操作" align="center">
        <template slot-scope="scope">
        <el-button @click="deletecarousel(scope.row.id)" size="mini">禁用</el-button>
        <el-button @click="deletedata(scope.row)" size="mini">删除</el-button>
        </template> 
    </el-table-column> -->
  </el-table>
    </div>
    <!-- 分页 -->
    <el-pagination
      :page-sizes="[5, 10, 15, 20]"
      :page-size="pages.pageSize"
      layout="total, sizes, prev, pager, next, jumper"
      :total="pages.total"
      :current-page.sync="pages.pageNum"
      @size-change="handleSizeChange"
      @current-change="handleCurrentChange"
      align="center"
      width="100%"
      >
    </el-pagination>
  </div>
</template>

<script>
export default {
  data() {
    return {
      tableData: [],
      pages: {
        //分页参数
        total: 0, // 数据总条数
        pageNum: 1, // 当前页
        pageSize: 5, // 每页条数
      },
    };
  },
   mounted () {
    this.selectOrders()

  },
  methods: {
    selectOrders() {
      // 查询所需数据(全查)
      this.$axios
        .get("/Order/selectOrders", {
          params: {
            pageNum: this.pages.pageNum, // 当前页
            pageSize: this.pages.pageSize, // 每条页数
          },
        })
        .then((res) => {
          if (res.data.code=200) {
            this.tableData = res.data.data.content;
            //课程价格
            this.tableData.forEach(item => {
              item.orderPrice =  '￥' + item.orderPrice;
            });
            //付款价格
            this.tableData.forEach(item => {
              item.paymentPrice = '￥' + item.paymentPrice;
            });
            // this.getfrontDeskMember()
            this.pages.total = res.data.data.totalSize;   
          }
          this.loading = false; // 加载圈绑定
        })
        .catch((err) => {
          // this.myMessage('error', err),
        });
    },
    // getfrontDeskMember() {// 会员状态赋值
    //     for (let i = 0; i < this.tableData.length; i++) {
    //         if (this.tableData[i].orderStatus === 1) {
    //             this.tableData[i].orderStatus = "已付款";
    //         } else   {
    //             this.tableData[i].orderStatus = "未付款";
    //         }
    //     }
    // },
    // 分页插件方法
    handleSizeChange(val) {
      this.pages.pageSize = val;
      this.selectOrders();
    },
    handleCurrentChange(val) {
      this.pages.pageNum = val;
      this.selectOrders();
    },
    myMessage(type, message) {
      this.$message({
        message: message,
        type: type,
      });
    },
    handleAvatarSuccess() {
    },
    handleChange(value) {
      console.log(value);
    }
  }
};
</script>

<style>
.el-button:focus, .el-button:hover {
    color: #19CAAD;
    border-color: #19CAAD;
    background-color: #fafafa;
}
.demo-table-expand {
    font-size: 0;
  }
  .demo-table-expand label {
    width: 97px;
    color: #99a9bf;
  }
  .demo-table-expand .el-form-item {
    margin-left: 55px;
    margin-bottom: 0;
    width: 50%;
  }
  .el-table--mini .el-table__cell {
    padding: 30px 0;
}
</style>